<template>
  <el-dialog v-model="showMultipleAllocation" :width="600" center :show-close="false">
    <template #header>
      <title-view title="批量分配" />
    </template>
    <div class="content">
      <el-form ref="formRef" label-position="left" :model="formData" :rules="addFormRules" v-loading="isLoading">
        <div class="form-title">分配的角色及负责人</div>
        <div class="form-row">
          <el-form-item prop="roleId" required>
            <select-remote
              v-model="formData.roleId"
              @change-select="changeRoleSelect"
              @clear-select="clearSelect('role')"
              placeholder="请输入角色名搜索"
              :request-api="roleList"
              :defaultConfig="{ keyword: 'name', label: 'roleName', value: 'roleId' }"
            ></select-remote>
          </el-form-item>
          <el-form-item prop="userId" required>
            <select-remote
              v-model="formData.userId"
              @change-select="changeRoleRelationNameSelect"
              :request-api="userNameByRoleId"
              @clear-select="clearSelect('relationName')"
              placeholder="请输入负责人姓名搜索"
              :params="roleRelationNameParams"
              :defaultConfig="{ keyword: 'userName', label: 'userName', value: 'userId' }"
            ></select-remote>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleConfirm" :disabled="isLoading">分配</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { computed, ref, getCurrentInstance } from "vue";
import { roleList, userNameByRoleId, multipleAllocation } from "@/apis/clientManager";

const { proxy } = getCurrentInstance();
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  selectCustomersArr: {
    type: Array,
    default: () => []
  }
});
console.log(props.selectCustomersArr);
const showMultipleAllocation = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    emit("update:modelValue", val);
  }
});
const emit = defineEmits(["update:modelValue", "multipleAllocationSave"]);

const isLoading = ref(false);
const formData = ref({
  type: 1,
  roleId: "",
  userId: "",
  userName: "",
  deptId: "",
  deptName: "",
  customerIds: props.selectCustomersArr
});
const addFormRules = {
  roleId: { required: true, message: "请选择角色", trigger: "change" },
  userId: { required: true, message: "请选择员负责人", trigger: "change" }
};
const roleRelationNameParams = ref({ roleId: "", status: false });
const changeRoleSelect = data => {
  roleRelationNameParams.value = {
    roleId: data.roleId,
    status: false
  };

  formData.value.roleId = data.roleId;
};
const changeRoleRelationNameSelect = data => {
  const { userId, userName, deptId, deptName } = data;
  formData.value.userId = userId;
  formData.value.userName = userName;
  formData.value.deptId = deptId;
  formData.value.deptName = deptName;
};
const clearSelect = type => {
  if (type === "role") {
    formData.value.roleId = "";
    formData.value.userId = "";
    roleRelationNameParams.value = { roleId: "", status: false };
  }
  if (type === "relationName") {
    formData.value.userId = "";
  }
};

const formRef = ref(null);
const handleConfirm = () => {
  proxy.$refs.formRef.validate(async val => {
    if (!val) {
      return proxy.$modal.msgError("请填写完整信息");
    }
    //进行逻辑处理
    isLoading.value = true;
    await multipleAllocation(formData.value);
    proxy.$modal.msgSuccess("操作成功");
    isLoading.value = false;
    showMultipleAllocation.value = false;
    emit("multipleAllocationSave");
  });

  console.log(formData.value);
};
const handleCancel = () => {
  showMultipleAllocation.value = false;
};
</script>

<style scoped lang="scss">
@use "@/assets/styles/mixin";
:deep(.el-form-item) {
  .el-select {
    width: 265px;
    margin-right: 10px;
  }
  .el-form-item__content {
    display: inline-block;
  }
}
.form-row {
  display: flex;
}
.form-title {
  font-size: 14px;
  color: #4e5969;
  margin-bottom: 10px;
  &::before {
    content: "*";
    color: #ff3333;
    padding-right: 5px;
  }
}
.dialog-footer {
  text-align: center;
  margin-top: 50px;
  :deep(.el-button) {
    width: 92px;
    height: 36px;
  }
}
</style>
